البرمجة

تصميم صفحة موقع باستخدام Bootstrap

اخر تحديث 10/06/2025
16 تمت قراءة 5 دقيقة

تصميم صفحة موقع باستخدام Bootstrap 3 – الجزء الثاني

يُعدّ Bootstrap من أشهر أُطُر العمل (Frameworks) المستخدمة في تصميم وتطوير صفحات الويب، خاصةً بسبب سهولة استخدامه وقدرته على توفير بنية متجاوبة وسريعة التنفيذ. في هذا المقال، سنكمل شرح تصميم صفحة موقع باستخدام Bootstrap 3، مع التركيز على تطبيقات أكثر تعقيداً، استراتيجيات تحسين التصميم، التعامل مع العناصر المختلفة، وأفضل الممارسات التي تضمن تحقيق تجربة مستخدم متميزة وأداء فعال.

مقدمة موجزة عن Bootstrap 3

قبل الخوض في تفاصيل الجزء الثاني من تصميم الصفحة، يجدر بنا تذكير بأن Bootstrap 3 هو إصدار شهير من إطار Bootstrap، يتميز بدعمه القوي للتصميم المتجاوب (Responsive Design) عبر نظام شبكي (Grid System) يعتمد على 12 عموداً. كما يحتوي على مجموعة كبيرة من المكونات الجاهزة مثل الأزرار، النماذج، التنقل، القوائم المنسدلة، وأدوات العرض (مثل الـ Modal، Carousel).

مواضيع ذات صلة

1. التعمق في نظام الشبكة (Grid System) في Bootstrap 3

يُعتبر نظام الشبكة من أهم مميزات Bootstrap 3، حيث يسمح بتنظيم المحتوى ضمن شبكة مرنة قابلة للتعديل حسب حجم الشاشة. يتكون هذا النظام من صفوف (rows) وأعمدة (columns) تسمح بتقسيم الصفحة إلى أجزاء متساوية أو غير متساوية بسهولة.

1.1 الأعمدة المتجاوبة Responsive Columns

يقدم Bootstrap 3 أربع فئات رئيسية للأعمدة بناءً على حجم الجهاز:

  • col-xs- للأجهزة الصغيرة جدًا (الشاشات المحمولة)

  • col-sm- للأجهزة الصغيرة (التابلت)

  • col-md- للأجهزة المتوسطة (الشاشات المكتبية الصغيرة)

  • col-lg- للأجهزة الكبيرة (الشاشات المكتبية الكبيرة)

يمكن للمصمم تخصيص عرض الأعمدة بحسب نوع الجهاز، مما يسمح بإنشاء تصميمات مرنة.

1.2 استخدام الأعمدة المتداخلة

يمكن أن تتداخل الأعمدة داخل بعضها البعض لتشكيل تخطيطات أكثر تعقيداً، وذلك بداخل صفوف أخرى.

مثال:

html
<div class="row">
  <div class="col-md-8">
    المحتوى الأساسي
    <div class="row">
      <div class="col-md-6">قسم فرعي 1div>
      <div class="col-md-6">قسم فرعي 2div>
    div>
  div>
  <div class="col-md-4">القائمة الجانبيةdiv>
div>

هذا النوع من التداخل يعزز من إمكانيات التصميم ويتيح وضع المحتوى بشكل منظم ومتعدد المستويات.

2. التعامل مع مكونات Bootstrap 3 المتقدمة

يحتوي Bootstrap 3 على مكونات جاهزة تُستخدم بشكل واسع لتحسين واجهات المستخدم، من أبرزها:

2.1 Navbar – شريط التنقل

يعتبر شريط التنقل أحد أهم مكونات أي موقع، ويمكن تخصيصه بسهولة في Bootstrap 3 ليكون متجاوباً مع مختلف أحجام الشاشات. يمكن إضافة قوائم منسدلة، أيقونات، وصناديق بحث.

مثال لشريط تنقل متجاوب:

html
<nav class="navbar navbar-default">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-1">
        <span class="sr-only">تبديل التنقلspan>
        <span class="icon-bar">span>
        <span class="icon-bar">span>
        <span class="icon-bar">span>
      button>
      <a class="navbar-brand" href="#">شعاريa>
    div>

    <div class="collapse navbar-collapse" id="navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">الرئيسيةa>li>
        <li><a href="#">من نحنa>li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown">الخدمات <span class="caret">span>a>
          <ul class="dropdown-menu">
            <li><a href="#">خدمة 1a>li>
            <li><a href="#">خدمة 2a>li>
          ul>
        li>
      ul>
      <form class="navbar-form navbar-right" role="search">
        <div class="form-group">
          <input type="text" class="form-control" placeholder="بحث">
        div>
        <button type="submit" class="btn btn-default">بحثbutton>
      form>
    div>
  div>
nav>

2.2 Carousel – عرض الصور المتحركة

تُستخدم هذه الأداة لإضافة عروض صور أو محتوى متحرك بطريقة أنيقة، مع إمكانية التحكم في الانتقال بين الصور.

html
<div id="myCarousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <li data-target="#myCarousel" data-slide-to="0" class="active">li>
    <li data-target="#myCarousel" data-slide-to="1">li>
    <li data-target="#myCarousel" data-slide-to="2">li>
  ol>

  <div class="carousel-inner">
    <div class="item active">
      <img src="image1.jpg" alt="الصورة الأولى">
      <div class="carousel-caption">
        <h3>عنوان الصورة الأولىh3>
        <p>وصف الصورة الأولىp>
      div>
    div>
    <div class="item">
      <img src="image2.jpg" alt="الصورة الثانية">
      <div class="carousel-caption">
        <h3>عنوان الصورة الثانيةh3>
        <p>وصف الصورة الثانيةp>
      div>
    div>
    <div class="item">
      <img src="image3.jpg" alt="الصورة الثالثة">
      <div class="carousel-caption">
        <h3>عنوان الصورة الثالثةh3>
        <p>وصف الصورة الثالثةp>
      div>
    div>
  div>

  <a class="left carousel-control" href="#myCarousel" role="button" data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left">span>
  a>
  <a class="right carousel-control" href="#myCarousel" role="button" data-slide="next">
    <span class="glyphicon glyphicon-chevron-right">span>
  a>
div>

3. تحسين تصميم النماذج Forms

يحتوي Bootstrap 3 على أنماط جاهزة للنماذج تسهل تصميم واجهات إدخال بيانات متناسقة وجذابة. يمكن استغلال عناصر مثل:

  • حقول النصوص (input)

  • مربعات الاختيار (checkbox)

  • أزرار الراديو (radio)

  • القوائم المنسدلة (select)

  • أزرار الإرسال (button)

3.1 تصميم نموذج تسجيل دخول Login Form

html
<form class="form-horizontal">
  <div class="form-group">
    <label for="inputEmail3" class="col-sm-2 control-label">البريد الإلكترونيlabel>
    <div class="col-sm-10">
      <input type="email" class="form-control" id="inputEmail3" placeholder="البريد الإلكتروني">
    div>
  div>
  <div class="form-group">
    <label for="inputPassword3" class="col-sm-2 control-label">كلمة المرورlabel>
    <div class="col-sm-10">
      <input type="password" class="form-control" id="inputPassword3" placeholder="كلمة المرور">
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <div class="checkbox">
        <label>
          <input type="checkbox"> تذكرني
        label>
      div>
    div>
  div>
  <div class="form-group">
    <div class="col-sm-offset-2 col-sm-10">
      <button type="submit" class="btn btn-primary">تسجيل الدخولbutton>
    div>
  div>
form>

3.2 النماذج المتجاوبة

تتكيف النماذج مع مختلف الأجهزة تلقائياً عند استخدام form-horizontal أو form-inline، ما يسهل استخدامها على الهواتف الذكية.

4. التعامل مع الجداول Tables

الجداول من العناصر المهمة لعرض البيانات المنظمة. يقدم Bootstrap 3 عدة أنماط لجداول قابلة للتخصيص، مثل:

  • .table : النمط الأساسي.

  • .table-striped : لجعل الصفوف متناوبة اللون.

  • .table-bordered : إضافة حدود واضحة.

  • .table-hover : تأثير تمييز الصف عند المرور عليه.

  • .table-condensed : لتصغير حجم الجدول ومساحته.

مثال على جدول بيانات:

html
<table class="table table-striped table-bordered table-hover">
  <thead>
    <tr>
      <th>المنتجth>
      <th>السعرth>
      <th>الكميةth>
      <th>الإجماليth>
    tr>
  thead>
  <tbody>
    <tr>
      <td>قلمtd>
      <td>1.5 ريالtd>
      <td>10td>
      <td>15 ريالtd>
    tr>
    <tr>
      <td>دفترtd>
      <td>5 ريالtd>
      <td>3td>
      <td>15 ريالtd>
    tr>
    <tr>
      <td>ممحاةtd>
      <td>0.5 ريالtd>
      <td>6td>
      <td>3 ريالtd>
    tr>
  tbody>
table>

5. تخصيص الألوان والخطوط والتنسيق

Bootstrap 3 يوفر إطار عمل متجانس لكنه مرن يمكن تخصيصه. يمكن تعديل الألوان عبر استبدال المتغيرات في ملفات الـ CSS (Sass أو LESS)، أو عبر إضافة CSS مخصص.

5.1 إضافة CSS مخصص

يمكن استهداف العناصر لتغيير ألوانها، خطوطها، وحجمها:

css
.navbar-default {
  background-color: #004080;
  border-color: #003366;
}

.navbar-default .navbar-brand {
  color: #fff;
}

.navbar-default .navbar-nav > li > a {
  color: #cce6ff;
}

h1, h2, h3 {
  font-family: 'Arial', sans-serif;
  color: #222;
}

5.2 استخدام خطوط Google Fonts

لتحسين شكل النصوص، يمكن استيراد خطوط من Google Fonts بسهولة:

html
<link href="https://fonts.googleapis.com/css?family=Cairo&display=swap" rel="stylesheet">

<style>
  body {
    font-family: 'Cairo', sans-serif;
  }
style>

6. تصميم الصفحة الكاملة باستخدام Bootstrap 3

لنتحدث الآن عن بناء صفحة ويب كاملة تبدأ من رأس الصفحة (Header)، مروراً بالمحتوى الأساسي، وانتهاءً بالتذييل (Footer).

6.1 هيكل الصفحة

  • الهيدر (Header): يحتوي على شعار الموقع وشريط التنقل.

  • المحتوى الرئيسي: يمكن تقسيمه إلى أعمدة، حيث يتم عرض المقالات أو المحتوى التعريفي في العمود الأكبر.

  • الشريط الجانبي (Sidebar): يحتوي على روابط إضافية، قوائم، أو إعلانات.

  • التذييل (Footer): يحتوي على حقوق النشر، معلومات الاتصال، وروابط أخرى.

6.2 مثال عملي لهيكل الصفحة:

html
html>
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <title>مثال صفحة Bootstrap 3title>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
  <style>
    body {
      font-family: 'Tahoma', sans-serif;
    }
    footer {
      background-color: #f8f8f8;
      padding: 20px 0;
      text-align: center;
      border-top: 1px solid #e7e7e7;
      margin-top: 30px;
    }
  style>
head>
<body>

<header>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">موقعيa>
      div>
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">الرئيسيةa>li>
        <li><a href="#">عن الموقعa>li>
        <li><a href="#">الخدماتa>li>
        <li><a href="#">تواصل معناa>li>
      ul>
    div>
  nav>
header>

<main class="container">
  <div class="row">
    <section class="col-md-8">
      <h2>عنوان المقالh2>
      <p>هنا نص طويل يوضح محتوى المقال أو المعلومات التي نرغب بعرضها للزوار، مع تقسيم الفقرات وتنسيق جيد.p>
      <p>يمكن إضافة صور، فيديوهات، وأقسام فرعية داخل هذا المحتوى الرئيسي.p>
    section>

    <aside class="col-md-4">
      <div class="panel panel-default">
        <div class="panel-heading">القائمة الجانبيةdiv>
        <div class="panel-body">
          <ul class="list-group">
            <li class="list-group-item"><a href="#">رابط 1a>li>
            <li class="list-group-item"><a href="#">رابط 2a>li>
            <li class="list-group-item"><a href="#">رابط 3a>li>
          ul>
        div>
      div>
    aside>
  div>
main>

<footer>
  <div class="container">
    <p>جميع الحقوق محفوظة © 2025p>
  div>
footer>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js">script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js">script>
body>
html>

7. التعامل مع الجافاسكريبت والتفاعلية

Bootstrap 3 يتطلب وجود مكتبة jQuery لتفعيل العديد من المكونات التفاعلية مثل القوائم المنسدلة، النوافذ المنبثقة، وعرض الصور المتحركة.

7.1 تفعيل المكونات

عند استيراد ملفات jQuery و Bootstrap JS، تشتغل المكونات تلقائياً. لكن يمكن أيضاً تخصيص السلوك عبر الجافاسكريبت.

مثال لتفعيل Carousel يدوياً:

js
$('#myCarousel').carousel({
  interval: 3000, // تغيير الصورة كل 3 ثواني
  pause: "hover" // التوقف عند مرور الماوس
});

8. ممارسات هامة لتحسين تصميم الموقع باستخدام Bootstrap 3

  • التركيز على التجاوب: تأكد من اختبار الصفحة على مختلف الأجهزة (موبايل، تابلت، سطح مكتب) لضمان ظهور المحتوى بشكل مثالي.

  • استخدام ملفات CSS و JS مضغوطة: لتقليل زمن تحميل الصفحة وتحسين الأداء.

  • تقسيم الأكواد بشكل منظم: المحافظة على تنظيم الأكواد HTML، CSS، وJS يجعل عملية التطوير أسهل.

  • التحكم بالألوان والخطوط: ضمان وضوح النصوص والتباين المناسب لتحسين قابلية القراءة.

  • تجنب تحميل الكثير من المكتبات: حيث يمكن أن يؤثر على سرعة الموقع.

9. التحديات الشائعة عند استخدام Bootstrap 3 وكيفية تجاوزها

  • مشاكل التوافق مع RTL (الكتابة من اليمين لليسار): Bootstrap 3 لا يدعم RTL بشكل مباشر، لذلك يحتاج المصممون لاستخدام ملفات CSS خاصة للاتجاه من اليمين إلى اليسار مثل bootstrap-rtl.css أو إجراء تعديلات يدوية.

  • تضارب في الأنماط المخصصة: عند إضافة CSS مخصص، يجب الانتباه إلى عدم تعارضه مع أنماط Bootstrap الافتراضية.

  • الأداء على الأجهزة القديمة: بسبب الاعتماد على jQuery، قد تظهر بطء في الأجهزة الضعيفة، لذا يجب تحسين الصور وتقليل حجم الأكواد.

جدول ملخص لمكونات Bootstrap 3 الأساسية واستخداماتها

المكون الوظيفة ملاحظات الاستخدام
Grid System تقسيم الصفحة لأعمدة وصفوف متجاوب حسب حجم الشاشة
Navbar شريط التنقل يدعم القوائم المنسدلة والبحث
Carousel عرض الصور المتحركة يمكن التحكم بالتنقل والسرعة
Forms تصميم نماذج الإدخال يدعم تنسيقات أفقية وعمودية
Tables عرض البيانات بشكل منظم يدعم ألوان متناوبة وحدود وتأثيرات
Panels إنشاء صناديق محتوى مفيد للمحتوى الجانبي أو الإعلانات
Modals النوافذ المنبثقة يظهر محتوى إضافي دون مغادرة الصفحة

خاتمة

تصميم صفحة موقع باستخدام Bootstrap 3 يتطلب فهماً عميقاً لمكونات النظام الشبكي، المكونات التفاعلية، وأساليب التخصيص المناسبة لضمان ظهور موقع ويب متجاوب، منظم، وسهل الاستخدام. بالاستفادة من نظام الشبكة المتقدم، أدوات التنقل، النماذج، والجداول، يمكن بناء صفحات متعددة الوظائف تلبي مختلف احتياجات المستخدمين وتوفر تجربة تصفح متكاملة على جميع الأجهزة. تطبيق التعديلات على الألوان والخطوط مع الاهتمام بالأداء يرفع من مستوى الموقع ويعزز من جاذبيته. Bootstrap 3 يبقى خياراً قوياً ومرناً لتصميم المواقع، خاصة مع الدعم الكبير والمجتمع النشط حوله.

المصادر والمراجع

  • وثائق Bootstrap 3 الرسمية: https

اخر تحديث 10/06/2025
16 تمت قراءة 5 دقيقة